<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="aaa">
			<div v-bind:title="msg">
				aklfdaklflskadfasdklfjlka
			</div>
			
			<div :title="msg">
				aklfdaklflskadfasdklfjlka
			</div>
			<div v-if="islogin">
				{{userinfo.username}}
				111
			</div>
			<div v-if="!islogin">
				222
				请点击登录
			</div>
			<button v-on:click="login">
				<span v-if="!islogin">login</span>
				<span v-if="islogin">logout</span>
			</button>
			<input v-bind:value="msg" />
			<input v-model="msg" />
		</div>
		<script>
			var vue = new Vue({
				el: '#aaa',
				data: {
					msg: 'hello',
					islogin: false,
					userinfo: {username: 'tom'}
				},
				methods: {
					login: function(){
						this.islogin = !this.islogin
					}
				}
			})
			
			console.info(vue)
			
			var stu = {
				sname:'tom',
				age: 10, 
				showage: function(){return this.age}
			}
			console.info(stu.showage())
		</script>
		
		
		<hr />
		
		<div id="bbb">
			<ul>
				<li v-for="item in slist">
					{{item}}
				</li>
			</ul>
			<ul>
				<li v-for="(bb, aa) in alist">
					{{aa}} - {{bb.name}}
				</li>
			</ul>
			
			<h1>{{message}}</h1>
			<button @click="abc">反过来</button>
		</div>
		<script>
			var v2 = new Vue({
				el: '#bbb',
				data: {
					slist: ['中国', '美国', '日报'], // 单纯的数组
					alist: [{name:'tom'},{name:'jerry'},{name: 'john'}],
					message: 'hello world'
				},
				methods: {
					abc() {
						this.message = this.message.split('').reverse().join('')
					}
				}
				
			})
			
			// js集合循环语法
			v2.slist.forEach((n, i) => {
				console.info(`下标${i}， 每一个值${n}`)
			})
			
			
		</script>
		
		
		
		
		
	</body>
</html>
